<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>圆周运动泛起的波浪2</title>
	<style>
		*{ margin: 0; padding: 0; box-sizing: border-box; }
		ul, ol{ list-style: none; }
		#root{
			display: flex; align-items: center; justify-content: center;
			width: 100vw; height: 100vh;
			overflow: hidden;
		}
		#root .top-bar{ position: absolute; z-index: 100; top: 0; left: 0; }
		#root .top-bar .range-wrap{ background-color: #EEEEEE33; }
		#root .top-bar .range-wrap .range{ width: 100vw;}
		#root .center{ position: relative; }
		#root .center .arrange{
			display: flex; align-items: center; justify-content: center;
			/*flex-wrap: wrap;*/
			/*width: 1030px;*/
			/*height: 580px;*/
			/*margin: -30px 0 0 -30px;*/
			/*padding: 30px 0 0 30px;*/
			/*background: #292929;*/
			/*pointer-events: none;*/
		}
		#root .center .arrange .circle{
			position: relative;
			/*width: 80px;*/
			/*height: 80px;*/
			/*margin: -30px 0 0 -30px;*/
			/*border-radius: 100px;*/
			border: 1px solid #33333333;
			animation: rotate 2s linear infinite;
		}
		#root .center .arrange .circle .dot{
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			/*width: 10px;*/
			/*height: 10px;*/
			/*border-radius: 10px;*/
			/*background: #CE0BE5;*/
			animation: color 2s linear infinite
		}
		@keyframes rotate{
			0%{ transform: rotate(0); }
			100%{ transform: rotate(360deg); }
		}
		@keyframes color{
			0%{background-color: #FF0000;}
			17%{background-color: #FF00FF;}
			34%{background-color: #0000FF;}
			50%{background-color: #00FFFF;}
			67%{background-color: #00FF00;}
			84%{background-color: #FFFF00;}
			100%{background-color: #FF0000;}
		}
	</style>
</head>
<body>
<div id="root" :style="{ backgroundColor: themeBg }">
	<div class="top-bar">
		<div class="range-wrap">
			<label title="拖动进度条以调整背景色"><input class="range" type="range" v-model="luminance"></label>
		</div>
	</div>
	<div class="center">
		<ul class="arrange" v-for="r1 of rows" :key="r1">
			<li v-for="c1 of columns" :key="c1">
				<div class="circle"
					 :style="{
  					  animationDelay: c1 + r1 + '00ms',
					  width: circle + 'px',
					  height: circle + 'px',
					  borderRadius: circle + 'px',
				     }"
				>
					<div class="dot"
						 :style="{
						  animationDelay: c1 + r1 + '00ms',
						  width: dot + 'px',
						  height: dot + 'px',
						  borderRadius: dot + 'px',
						 }"
					></div>
				</div>
			</li>
		</ul>
	</div>
</div>
<script src="./lib/vue.min.js"></script>
<script>
  new Vue({
    el: '#root',
    data: {
      columns: 0, // 列数量;必须是正整数
      rows: 0,  // 行数量;必须是正整数
      luminance: 20,  // 亮度: 0-100 *2.55
      // circle: 10,  // 运动轨迹的直径;必须>=1
      // dot: 1,  // 小点的直径;必须>=1
    },
    methods: {
      layout: function () {
        // 移动设备上看的话,就显示小一点点
        if (window.innerWidth >= 425) {
          this.circle = 60
          this.dot = 10
        } else {
          this.circle = 40
          this.dot = 8
        }
        // 计算行和列的数量-实现全屏铺满
        this.columns = parseInt(window.innerWidth / this.circle)
        this.rows = parseInt(window.innerHeight / this.circle)
        // 记录一下上一次变化后的尺寸
        this.lastWidth = window.innerWidth
        this.lastHeight = window.innerHeight
      },
      clear () {
        this.columns = 0
        this.rows = 0
      },
      resize () {
        // 手机端,浏览器页头会导致页面尺寸变化,这里忽略掉
        if (window.innerWidth <= 425 && this.lastHeight !== window.innerHeight) {
          return
        }
        this.clear()
        // 先清空页面,布局的操作要等到下一轮再执行 使用$nextTick
        this.$nextTick(this.layout)
        // 记录一下上一次变化后的尺寸
        this.lastWidth = window.innerWidth
        this.lastHeight = window.innerHeight
      }
    },
    computed: {
      themeBg () {
        let _r = this.luminance * 2.55
        let _g = this.luminance * 2.55
        let _b = this.luminance * 2.55
        return `rgba(${_r},${_g},${_b},1)`
      }
    },
    created () {
      this.layout()
    },
    mounted () {
      let _this = this
      window.onresize = function () {
        _this.resize()
      }
    },
    //注销window.onresize事件
    destroyed () {
      window.onresize = null
    },
  })
</script>
</body>
</html>
